<template>
	<view class="layout">
		<view class="FootprintTitle">
			<view class="underlineleft">
				<text class="Position">职位浏览记录</text>
				<view class="Records">
					
				</view>
			</view>
			<view class="underlineright">
				<text>职位报名记录</text>
			</view>
		</view>
		<view class="FootprintContent">
			<view class="ContentBao">
				<view class="ContentTop">
					<view class="ContentTopLeft">
						<view class="ContentTopLeftTop">
							<text class="GeneralWorkers">普工</text>
							<view class="ContentTopLeftTopSelfEmployed">
								自营
							</view>
						</view>
						<view class="ContentTopLeftButtom">
							<view class="ContentTopLeftButtomCondition">
								男女不限
							</view>
							<view class="ContentTopLeftButtomCondition">
								18-45岁
							</view>
							<view class="ContentTopLeftButtomCondition">
								工作经验不限
							</view>
						</view>
					</view>
					<view class="ContentTopRight">
						<view class="ContentTopRightAmount">
							<text>3000-3500</text>元/月
						</view>
					</view>
				</view>
				<view class="ContentCenter">
					<view class="ContentCenterLeft">
						<text class="Lo">logo</text>
						<view class="ContentCenterLeftContent">
							<text>广东顶米科技有限公司</text>
							<text>茂名市江南区·包吃·包住</text>
						</view>
					</view>
					<view class="ContentCenterRight">
						立即报名
					</view>
				</view>
				<view class="ContentButtom">
					<view class="ContentButtomLeft">
						<image class="UserAvatar" src="../../static/home/u685.png" mode=""></image>
						<text class="dianming">
							优宠家
						</text>
						<image class="CertificationMark" src="../../static/home/renzhengbiao.png" mode=""></image>
					</view>
					<view class="ContentButtomRight">
						23分钟前
					</view>
				</view>
			</view>
			<view class="ContentBao">
				<view class="ContentTop">
					<view class="ContentTopLeft">
						<view class="ContentTopLeftTop">
							<text class="GeneralWorkers">生产操作员</text>
							<view class="ContentTopLeftTopSelfEmployed">
								平台
							</view>
						</view>
						<view class="ContentTopLeftButtom">
							<view class="ContentTopLeftButtomCondition">
								男女不限
							</view>
							<view class="ContentTopLeftButtomCondition">
								18-45岁
							</view>
							<view class="ContentTopLeftButtomCondition">
								工作经验不限
							</view>
						</view>
					</view>
					<view class="ContentTopRight">
						<view class="ContentTopRightAmount">
							<text>3000-4500</text>元/月
						</view>
					</view>
				</view>
				<view class="ContentCenter">
					<view class="ContentCenterLeft">
						<text class="Lo">logo</text>
						<view class="ContentCenterLeftContent">
							<text>广东顶川科技有限公司</text>
							<text>茂名市江南区·包吃·包住</text>
						</view>
					</view>
					<view class="ContentCenterRight">
						立即报名
					</view>
				</view>
				<view class="ContentButtom">
					<view class="ContentButtomLeft">
						<image class="UserAvatar" src="../../static/home/u685.png" mode=""></image>
						<text class="dianming">
							吴韵音乐艺术中心
						</text>
						<image class="CertificationMark" src="../../static/home/renzhengbiao.png" mode=""></image>
					</view>
					<view class="ContentButtomRight">
						60分钟前
					</view>
				</view>
			</view>
			<view class="ContentBao">
				<view class="ContentTop">
					<view class="ContentTopLeft">
						<view class="ContentTopLeftTop">
							<text class="GeneralWorkers">报关员</text>
							<view class="ContentTopLeftTopSelfEmployed">
								平台
							</view>
						</view>
						<view class="ContentTopLeftButtom">
							<view class="ContentTopLeftButtomCondition">
								男女不限
							</view>
							<view class="ContentTopLeftButtomCondition">
								18-45岁
							</view>
							<view class="ContentTopLeftButtomCondition">
								工作经验不限
							</view>
						</view>
					</view>
					<view class="ContentTopRight">
						<view class="ContentTopRightAmount">
							<text>3000-4000</text>元/月
						</view>
					</view>
				</view>
				<view class="ContentCenter">
					<view class="ContentCenterLeft">
						<text class="Lo">logo</text>
						<view class="ContentCenterLeftContent">
							<text>广东科林半导体有限公司</text>
							<text>茂名市江南区</text>
						</view>
					</view>
					<view class="ContentCenterRight">
						立即报名
					</view>
				</view>
				<view class="ContentButtom">
					<view class="ContentButtomLeft">
						<image class="UserAvatar" src="../../static/home/u685.png" mode=""></image>
						<text class="dianming">
							胖东来建安店
						</text>
						<image class="CertificationMark" src="../../static/home/renzhengbiao.png" mode=""></image>
					</view>
					<view class="ContentButtomRight">
						60分钟前
					</view>
				</view>
			</view>
			<uni-load-more status="loading" ></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
</script>

<style lang="scss" scoped>
    .layout{
	   
		.FootprintTitle{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		    display: flex;
		    justify-content: space-around;
		    align-content: center;
		    font-size: 35rpx;
		    font-weight: bold;
			padding: 20rpx;
			background-color: white;
		    .underlineleft{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
			    color: #4673C6;
				.Position{
					margin-bottom: 20rpx;
				}
			    .Records{
					width: 100rpx;
					height: 3px;
					background-color: #4673C6;
					padding: 0 20rpx;
			    }
		    }
		}
		.FootprintContent{
			margin-top: 9vh;
			padding: 20rpx;
			width: 710rpx;
			height: 100vh;
			.ContentBao{
				margin-bottom: 30rpx;
				border-bottom: 1px solid #ccc;
				.ContentTop{
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					.ContentTopLeft{
						.ContentTopLeftTop{
							display: flex;
							align-items: center;
							.GeneralWorkers{
								font-size: 35rpx;
								font-weight: bold;
							}
							.ContentTopLeftTopSelfEmployed{
								margin-left: 20rpx;
								font-size: 25rpx;
								background-color: #3D6FF2;
								color: white;
								padding: 5rpx 15rpx;
								border-radius: 10rpx;
							}
						}
						.ContentTopLeftButtom{
							display: flex;
							align-items: center;
							margin: 8rpx 0;
							.ContentTopLeftButtomCondition{
								border-radius: 8rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #90979F;
								font-size: 25rpx;
								background-color: #EEEFF8;
								padding: 5rpx 10rpx;
								margin-right: 10rpx;
							}
						}
					}
					.ContentTopRight{
						padding: 10rpx;
						.ContentTopRightAmount{
							font-size: 30rpx;
							color: #D16F64;
							font-weight: bold;
						}
					}
				}
				.ContentCenter{
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.ContentCenterLeft{
						display: flex;
						align-items: flex-end;
						.Lo{
							color: white;
							font-weight: bold;
							background: #FAD86C;
							padding: 22rpx 10rpx;
						}
						.ContentCenterLeftContent{
							padding: 0 20rpx;
							color: #90979F;
							height: 70rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-direction: column;
						}
					}
					.ContentCenterRight{
						padding: 15rpx 20rpx;
						border-radius: 15rpx;
						margin-right: 10rpx;
						color: #EEEFF8;
						background: #FC6459;
						cursor: pointer;
					}
				}
				.ContentButtom{
					margin: 10rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.ContentButtomLeft{
						display: flex;
						align-content: center;
						font-weight: bold;
						
						.UserAvatar{
							width: 55rpx;
							height: 55rpx;
							margin-right: 15rpx;
						}
						.dianming{
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 15rpx;
							
						}
						.CertificationMark{
							padding: 12rpx 0 0;
							width: 30rpx;
							height: 30rpx;
						}
						
					}
					.ContentButtomRight{
						font-size: 25rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
    }    
</style>
